<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>修改头像 - 学生意见管理系统</title>
    <!-- 引入网站头部 -->
    <div th:replace="~{include/all_include::title}"/>
    <link rel="stylesheet" th:href="@{/common/resource/bootstrapvalidator/css/form-validation.css}">
    <script type="text/javascript" th:src="@{/common/resource/bootstrapvalidator/js/form-validation.js}"></script>
    <!-- 上传头像 -->
    <link rel="stylesheet" type="text/css" th:href="@{/common/resource/webuploader/webuploader.css}">
    <script type="text/javascript" th:src="@{/common/resource/webuploader/webuploader.js}"></script>
    <script type="text/javascript" th:inline="javascript">
        var rootPath = [[@{/}]];
        $(function () {
            $list = $("#fileList");
            var thumbnailWidth = 100;
            var thumbnailHeight = 100;

            // 初始化Web Uploader
            var uploader = WebUploader.create({
                // 选完文件后，是否自动上传。
                auto: false,
                // swf文件路径
                swf: rootPath + '/common/resource/webuploader/Uploader.swf',
                // 文件接收服务端。
                server: rootPath + 'head/users/usersUpdateSubmit?operType=updatePhoto',
                // 选择文件的按钮。可选。
                // 内部根据当前运行是创建，可能是input元素，也可能是flash.
                pick: '#filePicker',
                // 只允许选择图片文件。
                accept: {
                    title: 'Images',
                    extensions: 'gif,jpg,jpeg,bmp,png',
                    mimeTypes: 'image/*'
                }
            });


            // 当有文件添加进来的时候
            uploader.on('fileQueued', function (file) {
                var $li = $(
                        '<div id="' + file.id + '" class="file-item thumbnail">' +
                        '<img>' +
                        '<div class="info">' + file.name + '</div>' +
                        '</div>'
                    ),
                    $img = $li.find('img');


                // $list为容器jQuery实例
                $list.append($li);

                // 创建缩略图
                // 如果为非图片文件，可以不用调用此方法。
                // thumbnailWidth x thumbnailHeight 为 100 x 100
                uploader.makeThumb(file, function (error, src) {
                    if (error) {
                        $img.replaceWith('<span>不能预览</span>');
                        return;
                    }

                    $img.attr('src', src);
                }, thumbnailWidth, thumbnailHeight);
            });

            $(".radius").on("click", function () {
                uploader.upload();
            })
            // 文件上传过程中创建进度条实时显示。
            uploader.on('uploadProgress', function (file, percentage) {
                var $li = $('#' + file.id),
                    $percent = $li.find('.progress span');

                // 避免重复创建
                if (!$percent.length) {
                    $percent = $('<p class="progress"><span></span></p>')
                        .appendTo($li)
                        .find('span');
                }

                $percent.css('width', percentage * 100 + '%');
            });

            // 文件上传成功，给item添加成功class, 用样式标记上传成功。
            uploader.on('uploadSuccess', function (file) {
                $('#' + file.id).addClass('upload-state-done');
            });

            // 文件上传失败，显示上传出错。
            uploader.on('uploadError', function (file) {
                var $li = $('#' + file.id),
                    $error = $li.find('div.error');

                // 避免重复创建
                if (!$error.length) {
                    $error = $('<div class="error"></div>').appendTo($li);
                }

                $error.text('上传失败');
            });

            // 完成上传完了，成功或者失败，先删除进度条。
            uploader.on('uploadComplete', function (file) {
                $('#' + file.id).find('.progress').remove();
            });
        });
    </script>
</head>
<body>
<div th:replace="~{include/all_include::header}"/>
<!-- 网页的主体 -->
<div class="container">
    <div class="col-md-8 col-sm-10">
        <form id="form" method="post"  enctype="multipart/form-data"  class="form-horizontal" >
            <input type="hidden" name="operType" th:value="${param.operType}">
            <h2 lass="col-sm-10 col-sm-offset-1 form-signin-heading text-center">修改头像</h2>
            <div class="form-group">
                <label for="email" class="col-sm-3 control-label">邮箱</label>
                <div class="col-sm-5" th:value="${response.data.one?.email }">
                </div>
            </div>
            <div class="form-group">
                <label for="photo" class="col-sm-3 control-label">头像:</label>
                <div class="col-sm-8">
                    <!--dom结构部分-->
                    <div id="uploader-demo">
                        <!--用来存放item-->
                        <div id="fileList" class="uploader-list"></div>
                        <div id="filePicker">选择图片</div>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label for="photo" class="col-sm-2 control-label">头像:</label>
                <div class="col-sm-8">
                    <th:block th:if="${response.data.one?.photoPath != null && response.data.one?.photoPath != ''}">
                        <a target="_blank" th:href="@{${response.data.one?.photoPath}}">
                            <img th:src="@{${response.data.one?.photoPath}}"
                                 class="img-fluid rounded mx-auto" width="200" height="200">
                        </a>
                    </th:block>
                    <th:block th:if="${response.data.one?.photoPath == null || response.data.one?.photoPath == ''}">
                        <a target="_blank" th:href="@{/img/no_pic.png}">
                            <img th:src="@{/img/no_pic.png}"
                                 class="img-fluid rounded mx-auto" width="200" height="200">
                        </a>
                    </th:block>
                </div>
            </div>
            <input class="btn btn-primary radius mt-20" type="submit" style="width: 100px;font-size: 16px;height: 40px;" value="提交">
        </form>
    </div>
</div>
<div th:replace="~{include/all_include::footer}"/>
</body>
</html>